<template>
    <div class="main">
        <div class="head">
            <div class="head-l"><i class="iconfont icon-msnui-left-arrow-round" @click="show"></i></div>
            <div class="head-c">健康号</div>
            <div class="head-r"><i class="iconfont icon-sousuo"></i>
                <i class="iconfont icon-xinxi"></i>
            </div>
        </div>
       <div class="conm">
           <ul class="contlist">
               <li class="li active">我的活跃<b class="b"></b></li>
               <li class="li">最活跃<b class="b"></b></li>
               <li class="li">大咖帮<b class="b"></b></li>
               <li class="li">两性健康<b class="b"></b></li>
               <li class="li">亲子育儿<b class="b"></b></li>
           </ul>
           <div class="mesg">
               <div class="temp active">
                   <h2 class="h2">您还没有登录，登录后才可以查看已关注的健康号</h2>
                   <i class="i">点击登录</i>
               </div>
               <div class="temp special">
                   <div class="specialist"><img class="img" src="/static/img/yiyantang/20.jpg">
                       <div class="specialmain">
                           <p class="p1">杨草原<span class="span">住院医师</span></p>
                           <p class="p2">粉丝数 595 丨 内容数 973</p>
                           <p class="p2">简介：内科常见病</p>
                           <p class="p3">母乳喂养误区</p>
                       </div>
                       <div class="focus">关注</div>
                   </div>
                   <div class="specialist"><img class="img" src="/static/img/yiyantang/20.jpg">
                       <div class="specialmain">
                           <p class="p1">杨草原<span class="span">住院医师</span></p>
                           <p class="p2">粉丝数 595 丨 内容数 973</p>
                           <p class="p2">简介：内科常见病</p>
                           <p class="p3">母乳喂养误区</p>
                       </div>
                       <div class="focus">关注</div>
                   </div>
                   <div class="specialist"><img class="img" src="/static/img/yiyantang/20.jpg">
                       <div class="specialmain">
                           <p class="p1">杨草原<span class="span">住院医师</span></p>
                           <p class="p2">粉丝数 595 丨 内容数 973</p>
                           <p class="p2">简介：内科常见病</p>
                           <p class="p3">母乳喂养误区</p>
                       </div>
                       <div class="focus">关注</div>
                   </div>
                   <div class="specialist"><img class="img" src="/static/img/yiyantang/20.jpg">
                       <div class="specialmain">
                           <p class="p1">杨草原<span class="span">住院医师</span></p>
                           <p class="p2">粉丝数 595 丨 内容数 973</p>
                           <p class="p2">简介：内科常见病</p>
                           <img src="/static/img/yiyantang/18.png">
                           <p class="p3">母乳喂养误区</p>
                       </div>
                       <div class="focus">关注</div>
                   </div>
               </div>
               <div class="temp special">
                   <div class="specialist"><img class="img" src="/static/img/yiyantang/21.jpg">
                       <div class="specialmain">
                           <p class="p1">老廖说医疗</p>
                           <p class="p2">粉丝数 595 丨 内容数 973</p>
                           <p class="p2">简介：微医董事长兼CEO，中国医促会互联网医疗分会常务副主任委员，全国医联体联盟常务副理事长...</p>
                           <p class="p3">微医健康节启动</p>
                       </div>
                       <div class="focus">关注</div>
                   </div>
                   <div class="specialist"><img class="img" src="/static/img/yiyantang/21.jpg">
                       <div class="specialmain">
                           <p class="p1">老廖说医疗</p>
                           <p class="p2">粉丝数 595 丨 内容数 973</p>
                           <p class="p2">简介：微医董事长兼CEO，中国医促会互联网医疗分会常务副主任委员，全国医联体联盟常务副理事长...</p>
                           <p class="p3">微医健康节启动</p>
                       </div>
                       <div class="focus">关注</div>
                   </div>
                   <div class="specialist"><img class="img" src="/static/img/yiyantang/21.jpg">
                       <div class="specialmain">
                           <p class="p1">老廖说医疗</p>
                           <p class="p2">粉丝数 595 丨 内容数 973</p>
                           <p class="p2">简介：微医董事长兼CEO，中国医促会互联网医疗分会常务副主任委员，全国医联体联盟常务副理事长...</p>
                           <p class="p3">微医健康节启动</p>
                       </div>
                       <div class="focus">关注</div>
                   </div>
               </div>
               <div class="temp special">
                   <div class="specialist"><img class="img" src="/static/img/yiyantang/22.jpg">
                       <div class="specialmain">
                           <p class="p1">赵阳<span class="span">住院医师</span></p>
                           <p class="p2">粉丝数 595 丨 内容数 973</p>
                           <p class="p2">简介：内科常见病</p>
                           <p class="p3">宫颈炎注意事项</p>
                       </div>
                       <div class="focus">关注</div>
                   </div>
                   <div class="specialist"><img class="img" src="/static/img/yiyantang/22.jpg">
                       <div class="specialmain">
                           <p class="p1">赵阳<span class="span">住院医师</span></p>
                           <p class="p2">粉丝数 595 丨 内容数 973</p>
                           <p class="p2">简介：内科常见病</p>
                           <p class="p3">宫颈炎注意事项</p>
                       </div>
                       <div class="focus">关注</div>
                   </div>
                   <div class="specialist"><img class="img" src="/static/img/yiyantang/22.jpg">
                       <div class="specialmain">
                           <p class="p1">赵阳<span class="span">住院医师</span></p>
                           <p class="p2">粉丝数 595 丨 内容数 973</p>
                           <p class="p2">简介：内科常见病</p>
                           <p class="p3">宫颈炎注意事项</p>
                       </div>
                       <div class="focus">关注</div>
                   </div>
               </div>
               <div class="temp special">
                   <div class="specialist"><img class="img" src="/static/img/yiyantang/23.jpg">
                       <div class="specialmain">
                           <p class="p1">马丽<span class="span">住院医师</span></p>
                           <p class="p2">粉丝数 595 丨 内容数 973</p>
                           <p class="p2">简介：专业科学有效的发布小儿常见疾病的预防及治疗方法。小儿护理常识，喂养方法等。</p>
                           <p class="p3">梅毒的帅选以及确诊结果临床意义</p>
                       </div>
                       <div class="focus">关注</div>
                   </div>
                   <div class="specialist"><img class="img" src="/static/img/yiyantang/23.jpg">
                       <div class="specialmain">
                           <p class="p1">马丽<span class="span">住院医师</span></p>
                           <p class="p2">粉丝数 595 丨 内容数 973</p>
                           <p class="p2">简介：专业科学有效的发布小儿常见疾病的预防及治疗方法。小儿护理常识，喂养方法等。</p>
                           <p class="p3">梅毒的帅选以及确诊结果临床意义</p>
                       </div>
                       <div class="focus">关注</div>
                   </div>
                   <div class="specialist"><img class="img" src="/static/img/yiyantang/23.jpg">
                       <div class="specialmain">
                           <p class="p1">马丽<span class="span">住院医师</span></p>
                           <p class="p2">粉丝数 595 丨 内容数 973</p>
                           <p class="p2">简介：专业科学有效的发布小儿常见疾病的预防及治疗方法。小儿护理常识，喂养方法等。</p>
                           <p class="p3">梅毒的帅选以及确诊结果临床意义</p>
                       </div>
                       <div class="focus">关注</div>
                   </div>
               </div>
           </div>
       </div>
        <foot></foot>
    </div>
</template>
<script>
    import Foot from "../components/YiYanTang/Foot"
    export default {
        methods:{
            show:function () {
                this.$router.push("/yiyantang")
            }

        },
        mounted:function(){
            $(".contlist li").click(function () {
                $(this).addClass("active").siblings().removeClass("active");
                let iIndex=$(this).index()
                $(".mesg .temp").removeClass("active").eq(iIndex).addClass("active")
            })
        },
        components:{
            Foot
        }
    }
</script>
<style scoped>
    html,body{
        height: 100%;
    }
    .main{
        height: 100%;
        flex-direction: column;
        display: flex;
        justify-content: space-between;
    }
    .conm{
        flex: 1;
        overflow-x: hidden;
        overflow-y: auto;
    }
    .head {
        width: 100%;
        height: 0.42rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #eee;
        background: white; }
    .head .head-l .icon-msnui-left-arrow-round {
        font-size: 0.3rem; }
    .head .head-c {
        font-size: 0.2rem; }
    .head .head-r {
        margin-right: 0.05rem; }
    .head .head-r .iconfont {
        font-size: 0.22rem; }
    .head .head-r .icon-sousuo {
        margin-right: 0.1rem; }

    .contlist {
        display: flex;
        height: 0.4rem;
        align-items: center;
        justify-content: space-around;
        border-bottom: 1px solid #eee; }
    .contlist .li {
        width: 20%;
        color: #a6a8b6;
        font-size: 0.15rem;
        text-align: center;
        position: relative; }
    .contlist .li .b {
        width: 0.16rem;
        height: 0.02rem;
        background: #3f86ff;
        position: absolute;
        left: 38%;
        bottom: -0.11rem;
        display: none; }
    .contlist .active {
        color: #3f86ff; }
    .contlist .active .b {
        display: block; }

    .mesg .temp {
        display: none; }
    .mesg .temp .h2 {
        color: #a6a8b6;
        text-align: center;
        margin-top: 2rem; }
    .mesg .temp .i {
        display: block;
        width: 1.22rem;
        line-height: 0.4rem;
        color: white;
        font-size: 0.16rem;
        text-align: center;
        margin: 10px auto;
        background: #3f86ff;
        border-radius: 5px; }
    .mesg .active {
        display: block; }
    .mesg .special .img {
        width: 0.48rem;
        height: 0.48rem;
        border-radius: 50%; }
    .mesg .special .specialist {
        padding: 18px 12px;
        display: flex;
        position: relative;
        border-bottom: 1px solid #eee; }
    .mesg .special .specialist .specialmain {
        margin-left: 0.15rem; }
    .mesg .special .specialist .specialmain .p1 .span {
        border: 1px solid #3f86ff;
        width: 0.55rem;
        line-height: 0.17rem;
        color: #3f86ff;
        margin-left: 0.1rem; }
    .mesg .special .specialist .specialmain .p2 {
        color: #83889a;
        font-size: 0.14rem; }
    .mesg .special .specialist .specialmain .p3 {
        color: #28354c;
        font-size: 0.14rem;
        margin-top: 0.05rem; }
    .mesg .special .focus {
        line-height: 0.24rem;
        width: 0.6rem;
        height: 0.24rem;
        text-align: center;
        background: #3f86ff;
        font-size: 0.12rem;
        color: white;
        border-radius: 10px;
        position: absolute;
        right: 0.2rem; }
    .foot {
        width: 100%;
        height: 0.47rem;
        display: flex;
        border-top: 1px solid #eee;
        align-items: center;
        justify-content: space-around; }
    .foot .item {
        text-align: center;
        width: 25%;
        color: gray;
        font-size: 0.14rem; }
    .foot .item .iconfont {
        display: block;
        color: gray; }
    .foot .active {
        color: #3f86ff; }
    .foot .active .iconfont {
        color: #3f86ff; }
    /*# sourceMappingURL=healthlist.css.map */

</style>
